<template>
	<u-tabbar fixed :value="selected" @change="change1" activeColor="#ee0a24" :placeholder="false"
		:safeAreaInsetBottom="false">
		<u-tabbar-item v-for="(item,index) in tabbarList" :text="item.text" :key="index">
			<image class="tabbar-icon" slot="active-icon" :src="item.selectedIconPath"></image>
			<image class="tabbar-icon" slot="inactive-icon" :src="item.iconPath"></image>
		</u-tabbar-item>
	</u-tabbar>
</template>

<script>
	export default {
		name: "tab-bar",
		props: {
			selected: {
				type: Number
			}
		},
		data() {
			return {
				tabbarList: [{
						"pagePath": "pages/home/home",
						"iconPath": "static/images/首页.png",
						"selectedIconPath": "static/images/首页select.png",
						"text": "首页"
					},
					{
						"pagePath": "pages/center/center",
						"iconPath": "static/images/个人.png",
						"selectedIconPath": "static/images/个人select.png",
						"text": "我的"
					}
					// {
					// 	pagePath: '/pages/category/category',
					// 	text: '分类',
					// 	iconPath: '../../static/images/_category.png',
					// 	selectedIconPath: '../../static/images/category.png'
					// }, 
					// {
					// 	pagePath: '/pages/cart/cart',
					// 	text: '购物车',
					// 	iconPath: '../../static/images/_cart.png',
					// 	selectedIconPath: '../../static/images/cart.png'
					// }, 
				]
			};
		},
		methods: {
			change1(val) {
				// 因为在pages中配置了需要跳转的页面为 tabbar页面 
				// 所以不能使用navigateTo 只能使用下面这个方法跳转。
				uni.switchTab({
					url: this.tabbarList[val].pagePath
				})
			}
		}
	}
</script>

<style lang="scss">
	.tabbar-icon {
		height: 50rpx;
		width: 50rpx;
		padding: 6rpx;
	}
</style>